<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./styles/bootstrap.min.css" rel="stylesheet">
    <link href="./index.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./styles/font-awesome.min.css" />
    <!-- 引入jQuery文件 -->
    <script type="text/javascript" src="bootstrap/jquery-3.3.1.min.js"></script>
    <!-- 引入bootstrap js文件 -->
    <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
    <title>Document</title>

</head>

<body>
    <div class="container ">
        <div class="div-box">
            <div class="box box-logo col-lg-2 d-none d-lg-block">
                <img src="./images/bg-logo.png">
            </div>
            <div class="col-lg-6 col-md-8 py-5 wj_search">
                <form method="get" action="#" name="#">
                    <input type="text">
                    <button type="button"><span class="fa fa-search"></span></button>
                </form>
            </div>
            <div class="box box-a col-lg-4 col-md-4  d-none d-md-block">
                <a href="#">愿望清单</a>
                <a href="#">我的账号</a>
                <a class="gouwuche " href="#"><img src="./images/gouwuche.png"></a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 ">
                <div class="logo">
                    <img src="./images/logo.png">
                </div>
            </div>

            <div class="col-md-8 ">
                <nav class="navbar navbar-expand-md navbar-light ">
                    <!-- <a class="navbar-brand" href="#">Navbar</a> -->
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>


                    <!-- 给ul添加浮动 -->
                    <div class="collapse navbar-collapse  row-btn" id="navbarNavDropdown">
                        <ul class="navbar-nav  bg-light">
                            <li class="nav-item active bg-light-box">
                                <a class="nav-link " href="#">首页 <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">关于我们</a>
                            </li>
                            <li class="nav-item">
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="product.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                                    所有产品
                                </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="product.html">进口产品</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </li>
                                <a class="nav-link" href="relevant.html">相关文章</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">联系我们</a>
                            </li>

                        </ul>
                    </div>
                </nav>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="banner-poa">
            <ul>
                <li class="col-md-4  d-none d-md-block"><img src="images/bg-logo.png" alt=""></li>
                <li class="col-md-4  d-none d-md-block"><img src="images/bg-logo.png" alt=""></li>
                <li class="col-md-4  d-none d-md-block"><img src="images/bg-logo.png" alt=""></li>
                <li class="col-md-4  d-none d-md-block"><img src="images/bv.png" alt=""></li>
            </ul>


            <!--banner区域-->
            <div id="carouselExampleIndicators" class="banner carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active" data-interval="2000">
                        <img src="images/banner-1.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item" data-interval="2000">
                        <img src="images/banner-2.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item" data-interval="2000">
                        <img src="images/banner-3.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item" data-interval="2000">
                        <img src="images/banner-4.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item" data-interval="2000">
                        <img src="images/banner-6.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item" data-interval="2000">
                        <img src="images/banner-7.png" class="d-block w-100" alt="...">
                    </div>
                </div>
                <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a> -->
            </div>
        </div>

        <!-- tap栏 -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">新品到货</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">热卖商品</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">进口玩具</a>
            </li>
        </ul>
        <div class="tab-content " id="myTabContent">
            <div class="tab-pane fade show active " id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="card-group ">
                    <div class="card col-lg-12">
                        <img src="images/sp1.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">可爱小乌龟玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                    <div class="card col-lg-12">
                        <img src="images/sp2.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">哈皮狗玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                    <div class="card col-lg-12">
                        <img src="images/sp3.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">拼插花朵玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="card-group">
                    <div class="card">
                        <img src="images/sp4.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">彩色小船玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                    <div class="card">
                        <img src="images/sp5.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">私人客机小玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                    <div class="card">
                        <img src="images/sp6.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">军用直升机玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <div class="card-group">
                    <div class="card">
                        <img src="images/sp7.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">波音747玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                    <div class="card">
                        <img src="images/sp8.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">游轮玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                    <div class="card">
                        <img src="images/sp9.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">三体舰队玩具</h5>
                        </div>
                        <h5 class="card-back">670元</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- body2 为白色背景 -->
    <div class=" body2 ">
        <!-- banner -->
        <div class="container">
            <div class="banner-box">
                <h2>六一儿童节礼物</h2>
                <h1>45%折扣</h1>
                <h4>免邮费 - 仅需880元</h4>
                <a href="# ">立刻购买</a>
                <div class="box-img d-none d-lg-block">
                    <!-- <img src="images/bus.png" alt=""> -->
                </div>
            </div>


            <!-- 特色产品 -->

            <div class="product">
                <h2>特色产品</h2>
                <div class="card-group">
                    <div class="card-box col-md-6 col-lg-3 ">
                        <div class="card ">
                            <img src="images/sp7.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">波音747玩具</h5>
                            </div>
                            <h5 class="card-back">670元</h5>
                        </div>
                    </div>
                    <div class="card-box col-md-6 col-lg-3">
                        <div class="card ">
                            <img src="images/sp8.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">游轮玩具</h5>
                            </div>
                            <h5 class="card-back">670元</h5>
                        </div>
                    </div>
                    <div class="card-box col-md-6 col-lg-3">
                        <div class="card ">
                            <img src="images/sp9.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">三体舰队玩具</h5>
                            </div>
                            <h5 class="card-back">670元</h5>
                        </div>
                    </div>
                    <div class="card-box col-md-6 col-lg-3 ">
                        <div class="card ">
                            <img src="images/sp2.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">哈皮狗玩具</h5>
                            </div>
                            <h5 class="card-back">670元</h5>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 站内信箱 -->

            <div class="message">
                <h2>站内信箱</h2>
                <p>请提出您的宝贵意见，我们会以最快的速度回复您。</p>
                <div class="message-box">
                    <div class="message-input">
                        <input type="text" placeholder="Enter your email">
                    </div>

                    <div class="message-btn">
                        <button></button>
                        <!-- <img src="images/发送.png" alt=""> -->
                    </div>

                </div>
            </div>


            <!-- 赞助商标 -->

            <div class="container">
                <div class="row">
                    <div class="col-lg-2 col-4 logo-box">
                        <img src="images/log1.png" alt="">
                    </div>
                    <div class="col-lg-2 col-4 logo-box">
                        <img src="images/log2.png" alt="">
                    </div>
                    <div class="col-lg-2 col-4 logo-box">
                        <img src="images/log3.png" alt="">
                    </div>
                    <div class="col-lg-2 col-4 logo-box">
                        <img src="images/log4.png" alt="">
                    </div>
                    <div class="col-lg-2 col-4 logo-box">
                        <img src="images/log5.png" alt="">
                    </div>
                    <div class="col-lg-2 col-4 logo-box">
                        <img src="images/log6.png" alt="">
                    </div>
                </div>

            </div>

        </div>
        <div class="container-banner">
            <img src="images/landscape_banners.jpg" alt="">
        </div>

    </div>

    <!-- 紫色背景 -->
    <div class="body3">
        <!-- 页脚 -->

        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-12">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h5>相关信息</h5>
                        </li>
                        <li class="list-group-item">关于我们</li>
                        <li class="list-group-item">配送信息</li>
                        <li class="list-group-item">隐私政策</li>
                        <li class="list-group-item">条款和推荐</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-12">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h5>我的账户</h5>
                        </li>
                        <li class="list-group-item">我的账户</li>
                        <li class="list-group-item">历史订单</li>
                        <li class="list-group-item">愿望清单</li>
                        <li class="list-group-item">使用指南</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-12">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h5>附加</h5>
                        </li>
                        <li class="list-group-item">品牌历史</li>
                        <li class="list-group-item">更多礼券</li>
                        <li class="list-group-item">城市分会</li>
                        <li class="list-group-item">精品评价</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-12">
                    <ul class="list-group list-group-flush">
                        <h5 class="list-group-item" style="border: 0;">联系我们</h5>
                        <div class="list-box">
                            <p><img src="images/facebook.png" alt=""></p>
                            <li>Facebook</li>
                        </div>
                        <div class="list-box">
                            <p><img src="images/google.png" alt=""></p>
                            <li>Google +</li>
                        </div>
                        <div class="list-box">
                            <p><img src="images/twitter.png" alt=""></p>
                            <li>Twitter</li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <footer>
            <div class="container">2019 Designed by tch.All rights reserved
            </div>
        </footer>
    </div>

</body>

</html>